<!DOCTYPE html>
<html lang="en">

<head>

    {{template "common/head.html" .}}

    <style type="text/css">
        select, option {
            font-family: m-font, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif !important;
            font-size: 14px !important;
            font-weight: normal;
        }

        .page-class {
            padding: 40px 24px 70px;
            height: 100%;
        }

        .page-class-header {
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 140px;
            -ms-flex: 0 0 140px;
            flex: 0 0 140px;
        }

        .page-class-body {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            overflow-y: scroll;
        }

        .page-class-body::-webkit-scrollbar {
            display: none;
        }

        .page-class-title {
            position: relative;
        }

        .page-class-title::before {
            content: "";
            position: absolute;
            height: 8px;
            width: 15px;
            background-image: url();
            background-size: cover;
            font-size: 30px;
            top: -8px;
            left: 0;
        }

        .page-class-title .text {
            position: relative;
        }

        .page-class-title .text::after {
            content: "";
            height: 8px;
            width: 15px;
            background-image: url();
            background-size: cover;
            position: absolute;
            bottom: -8px;
            left: 40px;
        }

        .page-class-route-item {
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 22%;
            -ms-flex: 0 0 22%;
            flex: 0 0 22%;
        }

        .page-class-route-group {
            overflow-x: scroll;
            padding-bottom: 18px;

        }

        .page-class-route-group::-webkit-scrollbar {
            display: none;
        }

        .page-class-route-item .icon {
            width: auto;
            height: 40px;
            display: block;
            margin: 0 auto 12px;
            font-size: 36px;
        }

        .page-class-class-cards {
            margin: 0 24px;
            background-color: #fff;
            padding: 22px 18px;
        }

        .page-class-class-card {
            position: relative;
            width: 100%;
            height: 85px;
            border-radius: 7px;
            background-color: #fec901;
            margin-top: 22px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
        }

        .page-class-class-card.add {
            line-height: 85px;
            text-align: center;
            font-size: 40px;
        }

        .page-class-class-card.add img {
            width: 28px;
            height: auto;
        }

        .page-class-class-card .text {
            width: 160px;
            margin: 0 auto;
            z-index: 5;
        }

        .page-class-class-card .text span {
            font-weight: 600;
        }

        .page-class-class-card:nth-child(1) {
            margin-top: 0;
        }

        .page-class-add-class {
            width: 100%;
            background: #fec901;
            -webkit-box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            border-radius: 16px;
            width: 320px;
            height: 180px;
            padding: 20px 28px;
            overflow: hidden;
        }

        .style-select {
            margin-bottom: 12px;
        }
    </style>
</head>

<body>
<div class="page-main">
    <div class="page-main-container">
        <div flex="dir:top" class="child-view page-class">
            <div class="ui-title-color page-class-header">
                <div flex="cross:bottom" class="ui-pd-l-10 page-class-title">
                    <span class="teacher-name ui-text-28">{{.loginUser.RealName}}</span>
                    <span class="text ui-text-18 ui-mg-l-5">老师你好</span>
                </div>
                <div flex="" class="ui-mg-t-20 page-class-route-group">
                    <div class="ui-text-center page-class-route-item"
                         onclick="location.href='{{urlfor "teacher.HomeworkNoticeController.ShowList"}}';">
                        <i class="iconfont icon-zuoye icon"></i>
                        <span class="text">作业历史</span>
                    </div>
                    <div class="ui-text-center page-class-route-item"
                         onclick="location.href='{{urlfor "teacher.MeetingNoticeController.ShowList"}}';">
                        <i class="iconfont icon-huiyi icon"></i>
                        <span class="text">会议历史</span>
                    </div>
                    <div class="ui-text-center page-class-route-item"
                         onclick="location.href='{{urlfor "teacher.SafeNoticeController.Index"}}';">
                        <i class="iconfont icon-baojing icon"></i>
                        <span class="text">门禁历史</span>
                    </div>
                    <div class="ui-text-center page-class-route-item"
                         onclick="location.href='{{urlfor "teacher.GradeNoticeController.ShowList"}}';">
                        <i class="iconfont icon-chengji icon"></i>
                        <span class="text">成绩历史</span>
                    </div>
                    <div class="ui-text-center page-class-route-item"
                         onclick="location.href='{{urlfor "teacher.SchoolBusNoticeController.ShowList"}}';">
                        <i class="iconfont icon-xiaoche icon"></i>
                        <span class="text">校车历史</span>
                    </div>
                    <div class="ui-text-center page-class-route-item"
                         onclick="location.href='{{urlfor "teacher.CourseNoticeController.ShowList"}}';">
                        <i class="iconfont icon-kechengbiao icon"></i>
                        <span class="text">课程历史</span>
                    </div>
                    <div class="ui-text-center page-class-route-item"
                         onclick="location.href='{{urlfor "teacher.TempNoticeController.Index"}}';">
                        <i class="iconfont icon-tiwenbiao icon"></i>
                        <span class="text">体温监测</span>
                    </div>
                </div>
            </div>
            <div class="page-class-body">
                <div class="page-class-class-cards">
                    {{range .classList}}
                        <div class="page-class-class-card" style="background-image: url(/static/front/images/5.jpg);"
                             onclick="location.href='{{urlfor "teacher.ClassController.Detail" ":id" .Id}}';">
                            <div flex="main:center cross:center"
                                 class="position ui-mask-block ui-mask-2 page-class-mask">
                                <p flex="main:justify" class="text ui-title-color">
                                    <span class="class-name">{{.Name}}</span>
                                    <span class="class-code">{{.Sn}}</span>
                                </p>
                            </div>
                        </div>
                    {{end}}
                    <div class="add page-class-class-card" onclick="location.href='{{urlfor "teacher.ClassController.Add"}}';">
                        <img src="" alt="" srcset="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{template "common/teacher-nav.html" .}}

</div>
</body>

<script type="text/html" id="notice-tpl">
    <div class="page-main-publish">
        <div class="page-main-form" flex="dir:top">
            <form id="data-form">
                {{.xsrfdata}}
                <select id="notice_type" name="notice_type" class="m-select ui-mg-b-10">
                    <option value="">请选择通知类型：</option>
                    <option value="1">作业</option>
                    <option value="2">会议</option>
                </select>
                <select id="notice_course" name="course_id" class="m-select ui-mg-b-10">
                    <option value="">请选择科目：</option>
                    {{range .courseList}}
                        <option value="{{.Id}}">{{.Name}}</option>
                    {{end}}
                </select>
                <select id="notice_class" name="class_id" class="m-select ui-mg-b-10">
                    <option value="">请选择班级：</option>
                    {{range .classList}}
                        <option value="{{.Id}}">{{.Name}}</option>
                    {{end}}
                </select>
                <textarea id="notice_content" name="content" placeholder="请输入内容" maxlength="500" indicator="true"
                          class="m-textarea"></textarea>
            </form>
        </div>
        <div class="m-button m-button-default m-button-block publish-submit-btn"
             style="width: 110px; margin: 12px auto 0px; border-radius: 14px;" id="do-submit">发布
        </div>
    </div>
</script>

<script>

    var canSubmit = true,
        submitUrl = '';

    const popup = new MPopup({
        content: ``
    });

    function showPublish() {
        popup.show($('#notice-tpl').html());
        tastySelect();
    }

    $('body').on('click', '#do-submit', function () {

        var noticeType = $('#notice_type').val().toString();

        if (noticeType.length <= 0) {
            layer.open({content: '请选择通知类型', skin: 'msg', time: 2});
            return false;
        }
        if (noticeType == '1') {
            if ($('#notice_course').val().length <= 0) {
                layer.open({content: '请选择科目', skin: 'msg', time: 2});
                return false;
            }
        }
        if ($('#notice_class').val().length <= 0) {
            layer.open({content: '请选择班级', skin: 'msg', time: 2});
            return false;
        }
        if ($('#notice_content').val().length <= 0) {
            layer.open({content: '请输入作业内容', skin: 'msg', time: 2});
            return false;
        }

        switch (noticeType) {
            case '1':
                submitUrl = '{{urlfor "teacher.HomeworkNoticeController.DoAdd"}}';
                break;
            case '2':
                submitUrl = '{{urlfor "teacher.MeetingNoticeController.DoAdd"}}';
                break;
        }

        if (!canSubmit) return false;
        var loadIndex = layer.open({type: 2});
        canSubmit = false;

        $.ajax({
            url: submitUrl,
            type: 'POST',
            data: $('#data-form').serialize(),
            dataType: 'json',
            success: function (res) {

                layer.close(loadIndex);
                canSubmit = true;

                layer.open({content: res.msg, skin: 'msg', time: 2});
                if (res.status == 1) {
                    setTimeout(function () {
                        location.href = '{{urlfor "teacher.IndexController.Index"}}';
                    }, 1000);
                }

            }
        });

    });

</script>

</html>